/**
 * @description 
 * @author cq
 * @Date 2021-04-06 15:02:26
 * @LastEditTime 2021-04-28 10:11:28
 * @LastEditors cq
 */
import React, { useState } from "react"
import ReduxPage from "./page/ReduxPage"
import ReduxHooksPage from "./page/ReduxHooksPage"
import { BrowserRouter, Link, Route, Switch } from "./react-router-dom";
import HomePage from "./page/HomePage"
import UserPage from "./page/UserPage"
import Product from "./page/Product"
// import ReactPage from "./page/ReactPage"
import BannerChart from "./page/BannerChart"
import AudioPage from "./page/AudioPage"

import './App.css';
function App() {
  const [state, setstate] = useState(0)
  const handClick = () => {
    setstate(state + 1)
  }
  return (
    <div className="App"><AudioPage /></div>
    // <div className="App"><BannerChart /></div>

  )
  //   return (
  //     <div className="App">
  //       {/* <ReduxPage/> */}
  //       {/* <ReduxHooksPage/> */}




  //       <BrowserRouter>
  //         <nav>
  //           <Link to="/">首页</Link>
  //           <Link to="/user">用户中心</Link>
  //           <Link to="/product/123">商品</Link>

  //         </nav>
  //         <button onClick={handClick}>{state}</button>
  //         {/* 根路由要添加exact，实现精确匹配 */}
  //         {/* Route渲染优先级：children>component>render */}
  //         {/*  渲染component的时候会调用React.createElement，如果使用下面这种匿名函数的形
  // 式，每次都会生成一个新的匿名的函数，
  // 导致生成的组件的type总是不相同，这个时候会产生重复的卸载和挂载 */}
  //         <Switch>
  //         <Route
  //           path="/product/:id"
  //           component={Product}
  //           // render={() => <Product />}
  //         />
  //         <Route exact
  //           path="/"
  //           // children 是不管是否匹配都会出现
  //           // children={() => <div>我是children渲染结果</div>}
  //           // render={() => <div>我是render渲染结果</div>}
  //           // component={() => <HomePage/>}
  //           component={HomePage}
  //         />
  //         <Route path="/user" component={UserPage} />
  //         {/* <Route render={() => <h1>404</h1>} /> */}
  //         </Switch>
  //       </BrowserRouter>
  //     </div>
  //   );
}

export default App;
